<template>
  <view class="root">
    <!-- WebSocket状态信息 -->
    <text class="stat">{{ socketStatus }}</text>

    <!-- 消息列表 -->
    <view class="msg-box">
      <block v-for="(message, index) in messages" :key="index">
        <text class="msg-item" :class="message.me ? 'right' : 'left'">
          {{ message.me ? message.msg : message }}
        </text>
      </block>
    </view>

    <!-- 发送消息 -->
    <view class="sender">
      <input v-model="msg" type="text" />
      <u-button @click="sendMsg">发送</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      socket: null, // WebSocket实例
      socketStatus: "", // WebSocket连接状态信息
      messages: [], // 接收到的消息列表
      msg: "555#hello from mp",
    };
  },

  methods: {
    sendMsg(e) {
      // 向远程连接发送消息
      uni.sendSocketMessage({
        data: this.msg,
      });

      this.messages.push({
        me: true,
        msg: this.msg,
      });
	  
      this.msg = "";
    },
  },

  /* 页面被加载 */
  onLoad() {
    // 建立WebSocket连接 + 将远程套接字对象挂在当前页面实例上
    this.socket = uni.connectSocket({
      url: "ws://localhost:8080",
      success: () => {
        this.socketStatus = "连接成功";
      },
      fail: () => {
        this.socketStatus = "连接失败";
      },
    });

    // 监听WebSocket连接打开事件
    uni.onSocketOpen(() => {
      this.socketStatus = "已连接";
    });

    // 监听WebSocket连接关闭事件
    uni.onSocketClose(() => {
      this.socketStatus = "已关闭";
    });

    // 监听WebSocket连接错误事件
    uni.onSocketError(() => {
      this.socketStatus = "连接错误";
    });

    // 监听WebSocket接收到消息事件
    // res.data 即服务端套接字对象发来的数据
    uni.onSocketMessage((res) => {
      this.messages.push(res.data);
    });
  },

  onUnload() {
    // 关闭WebSocket连接
    uni.closeSocket();
  },
};
</script>

<style scoped lang="scss">
$senderHeight: 80rpx;
$light-gray: #eee;

.root {
  padding: 10rpx;
  background-color: azure;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  color: black;

  .stat {
    text-align: center;
    margin-bottom: 10rpx;
    color: #666;
    font-size: 0.5rem;
    background-color: $light-gray;
    padding: 20rpx;
    margin: -10rpx;
    margin-bottom: 10rpx;
  }

  .msg-box {
    display: flex;
    flex-direction: column;

    .msg-item {
      padding: 10rpx 20rpx;
      border: 1px solid $light-gray;
      border-radius: 10rpx;
      margin: 10rpx 0;
      width: fit-content;
    }

    .left {
      background-color: white;
      align-self: flex-start;
    }

    .right {
      background-color: greenyellow;
      align-self: flex-end;
    }
  }

  .sender {
    display: flex;
    position: absolute;
    bottom: 10rpx;
    width: calc(100% - 20rpx);

    input {
      flex: 1;
      border: 1px solid $light-gray;
      border-radius: 5rpx;
      height: 75rpx;
      // display: inline-block;
      padding: 0 15rpx;
      background-color: white;
    }

    u-button {
      width: 200rpx;
      height: $senderHeight;
      margin-left: 10rpx;
    }
  }
}

// end
</style>
